<template>
  <view class="container">
    <!-- 底部弹起协议面板 -->
    <view class="agreement-panel" :class="{ show: showAgreement }">
      <view class="panel-header">
        <text class="panel-title" v-if="code === 'user_agreement'">用户协议相关内容</text>
        <text class="panel-title" v-else-if="code === 'privacy_agreement'">隐私条款相关内容</text>
        <text class="panel-title" v-else>合乘协议相关内容</text>
      </view>

      <view class="panel-content">
        <scroll-view scroll-y="true" class="agreement-scroll">
          <text class="agreement-text" >
            {{userAgreementValue}}
          </text>
          <!-- <text class="agreement-text" v-else>
            移动应用开发者模板:提供符合标准的用户协议与隐私政策模板，帮助开发者轻松创建并实施这些重要文档，确保应用合规。
            隐私协议模板:包含信息收集、使用、共享、用户权利和隐私协议修改等内容的模板。
            APP隐私政策服务条款模板:详细介绍如何配置隐私政策协议，并提供相关模板。
            多种隐私政策模板:针对不同类型的应用程序多种隐私政策模板供开发者参考。这些资源可以帮助您制定符合要求的用户协议和隐私政策。
          </text> -->
        </scroll-view>

        <!-- <view class="agree-btn" @click="confirmAgreement">
          同意协议并继续
        </view> -->
      </view>
    </view>

    <!-- 遮罩层 -->
    <view class="mask" :class="{ show: showAgreement }" @click="confirmAgreement"></view>
  </view>
</template>

<script>
export default {
  props: {
    showAgreement: {
      type: Boolean,
      default: false
    },
    code: {
      type: String,
      default: 'riding_agreement'
    }
  },
  data() {
    return {
      userAgreementValue: ''
    }
  },
  watch: {
    showAgreement(val) {
      if(val){
        this.getUserAgreementInfo()
      }
      
    },
  },
  methods: {
    async getUserAgreementInfo() {
      try {
        const res = await this.$http.get(`/h5/common/configByCode?code=${this.code}`)
        this.userAgreementValue = res.data[0].value
      } catch (error) { }
    },
    confirmAgreement() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style>
/* 协议面板样式 */
.agreement-panel {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background-color: #F5F5F6;
  border-radius: 50rpx 50rpx 0 0;
  transition: all 0.3s ease;
  z-index: 100;
  min-height: 40vh;
  max-height: 70vh;
}

.agreement-panel.show {
  bottom: 0;
}

.panel-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx 0 52rpx 0;
}

.panel-title {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 32rpx;
  color: #0B1F20;
  line-height: 48rpx;
}

.close-btn {
  /* font-size: 48rpx;
  color: #999; */
}

.panel-content {
  padding: 0 26rpx 84rpx 26rpx;
  margin-bottom: 40rpx;
}

.agreement-scroll {
  max-height: 50vh;

}

.agreement-text {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-size: 30rpx;
  color: #666666;
  line-height: 54rpx;
  letter-spacing: 1px;
}

.agree-btn {
  background-color: #07c160;
  color: white;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  font-weight: bold;
  margin-top: 15px;
}

/* 遮罩层样式 */
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 99;
}

.mask.show {
  opacity: 1;
  pointer-events: auto;
}
</style>